<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Polar Area Chart</h1>
        <p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
    </div>
    <app-demoActions github="chart/polarareachart"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card flex justify-content-center">
        <p-chart type="polarArea" [data]="data" [options]="chartOptions" [style]="{'width': '40%'}"></p-chart>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/chart/polarareachart" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-chart type="polarArea" [data]="data" [options]="chartOptions" [style]="&#123;'width': '40%'&#125;"&gt;&lt;/p-chart&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class PolarAreaChartDemo &#123;

    data: any;

    chartOptions: any;

    subscription: Subscription;

    config: AppConfig;

    constructor(private configService: AppConfigService) &#123;&#125;

    ngOnInit() &#123;
        this.data = &#123;
            datasets: [&#123;
                data: [
                    11,
                    16,
                    7,
                    3,
                    14
                ],
                backgroundColor: [
                    "#42A5F5",
                    "#66BB6A",
                    "#FFA726",
                    "#26C6DA",
                    "#7E57C2"
                ],
                label: 'My dataset'
            &#125;],
            labels: [
                "Red",
                "Green",
                "Yellow",
                "Grey",
                "Blue"
            ]
        &#125;;

        this.config = this.configService.config;
        this.updateChartOptions();
        this.subscription = this.configService.configUpdate$.subscribe(config =&gt; &#123;
            this.config = config;
            this.updateChartOptions();
        &#125;);
    &#125;

    updateChartOptions() &#123;
        this.chartOptions = this.config && this.config.dark ? this.getDarkTheme() : this.getLightTheme();
    &#125;

    getLightTheme() &#123;
        return &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                r: &#123;
                    grid: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;
    &#125;

    getDarkTheme() &#123;
        return &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;,
            scales: &#123;
                r: &#123;
                    grid: &#123;
                        color: 'rgba(255,255,255,0.2)'
                    &#125;
                &#125;
            &#125;
        &#125;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
    </p-tabView>
</div>
